<template>
	<view>
	<view class="myreserve" v-for="(item,index) in reserve" :key="index">
		<image :src="item.src" mode="aspectFill"></image>
		<view class="name">
			<text class="name">名称：{{item.name}}</text>
	        <text class="price">价格：￥{{item.price}}</text>
		</view>
		<button class="reserve" @click="reserve_button(item)">预定</button>
		
	</view></view>
</template>

<script>
	export default {
		data() {
			return {
				reserve:[
					{src:"/static/background.jpg",name:"大床房",price:"1231",pk:'1'},
					{src:"/static/background1.jpg",name:"空调房",price:"1231",pk:'2'},
					{src:"/static/background2.jpg",name:"书房",price:"1231",pk:'3'},
				
				]
           
		}
		},
		methods: {
			reserve_button(item) {
				console.log(item.pk);
			}

		},
	}
	
</script>

<style>
	.myreserve{
			display: flex;
			padding: 20px;
			box-shadow: 0 0 8rpx 5rpx rgba(81, 81, 81, 0.5);

	}
	.myreserve .name{
		display: flex;
		/* 竖直排布 */
		flex-direction: column;
		/* 均匀分布 */
		justify-content: space-evenly;
	}
	.myreserve image{
		width: 80px;
		height: 80px;
		margin-right: 20px;
	}
	.name{
		font-size: 13px;
		font-weight: 500;
	}
	.price{
		margin-top: 30px;
		font-size: 15px;
		font-weight: 900;
		color: red;

	}
	.reserve{
	    font-size: 15px;
		width: 30%;
		margin-top: 50px;
		margin-left: 30px;
		background-color: #ffaa00f0;
	}
</style>